<template>
<div class="login-wrap">

    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
        <div class="aa">
            <h1 class="title">社区门诊登录</h1>
        </div>
        <el-form-item prop="userAccount">
            <el-input type="text" v-model="loginForm.userAccount" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
            <el-input type="password" v-model="loginForm.userPassword" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <!-- <a href="http://localhost:8080/#/userInfo">没有账号？点击注册</a> -->
        <el-form-item stzyle="width:100%">
            <el-button type="primary" @click="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import * as api from "@/api/api.js";
import axios from 'axios';
import {
    mapGetters
} from "vuex";
import {
    mapActions
} from "vuex";
import Qs from 'qs'
import {
    Message
} from 'element-ui';

/**
 * 提示函数
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {
    Message(msg);
}

export default {
    data() { //定义的数据，在这里附上值，显示在页面上
        return {
            logining: false,
            loginForm: { //和实体定义的属性名字一个样
                userAccount: "",
                userPassword: "",
            },
            loginRules: {
                userAccount: [{
                    required: true,
                    message: "请输入账号",
                    trigger: "blur"
                }],
                userPassword: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                }]
            },
        };
    },
    methods: {
        handleReset() {
            this.$refs.loginForm.resetFields();
        },
        handleSubmit(event) {
            this.$refs.loginForm.validate(valid => { //validate（）是对表单里的东西进行验证，是由$refs获取的控件
                if (valid) {
                    api.requestLogin(this.loginForm).then(data => {
                        this.logining = false;
                        if (data.message != "success") {
                            this.logining = false;
                            this.$message({
                                message: msg,
                                type: "error"
                            });
                        } else {
                            this.update(data.returnObj);
                            let userType = data.returnObj.userType;
                            localStorage.setItem('userType', userType); //主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题。将后面的存储到前面。
                            localStorage.setItem('userStatus', data.returnObj.userStatus);
                            localStorage.setItem('userId', data.returnObj.userId);
                            localStorage.setItem('userName', data.returnObj.userName);

                            if (data.code == 'status0') {
                                this.$message({
                                    message: "首次登陆，请修改密码",
                                    type: "error"
                                });
                                this.$router.push({ //push到对应的前端去
                                    path: "/userInfo"
                                });
                                return;
                            }

                            this.$router.push({
                                path: userType == '0' ? "/ListUser" : userType == '1' ? "/CaseInfo" : userType == '2' ? "/Registered" : userType == '3' ? "/HealthInfoPrint" : userType == '4' ? "/FeeRecord" : "/Websocket"
                            });
                        }
                    }).catch((error, status) => {
                        this.logining = false;
                    });
                } else {
                    this.$message.error('填上用户名密码！！！')
                    return false;
                }
            });
        },
        ...mapActions("user", ["update"]) //vuex登陆时把用户信息保存在前台，update是用来更新用户信息的
    },
    computed: {
        ...mapGetters("user", ["getUser"])
    },

    mounted: function () {
        this.loginForm = this.getUser;
    }
};
</script>

<style lang="scss" scoped>
.login-wrap {
    .qrcode-box {
        display: flex;
        justify-content: center;
    }
}

.login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .title {
        margin: 0px auto 40px auto;
        color: #505458;
        text-align: center;
        font-size: 25px !important;
    }

    .aa {
        text-align: center;

    }

    .remember {
        margin: 0px 0px 35px 0px;
    }

    .loginform {
        color: #FFF;
        background-color: #60e0eb;
        border-color: #60e0eb;
    }
}

.el-button--primary {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF
}

.login-container {
    margin: 300px auto 0 !important;
}

.qrcode-right {
    position: absolute;
    top: 10px;
    right: 30px;
}

.qrcode-left {
    position: absolute;
    top: 10px;
    right: 200px;
}

.img-size {
    width: 150px;
    height: 150px;
}

.left-little {
    margin-right: 20px;
}
</style>
